@metamask-previews/design-system-react 0.0.0-preview.e1b50dd → 0.0.0-preview.e6fc4b7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/badge-count/BadgeCount.cjs +21 -0
- package/dist/components/badge-count/BadgeCount.cjs.map +1 -0
- package/dist/components/badge-count/BadgeCount.constants.cjs +15 -0
- package/dist/components/badge-count/BadgeCount.constants.cjs.map +1 -0
- package/dist/components/badge-count/BadgeCount.constants.d.cts +5 -0
- package/dist/components/badge-count/BadgeCount.constants.d.cts.map +1 -0
- package/dist/components/badge-count/BadgeCount.constants.d.mts +5 -0
- package/dist/components/badge-count/BadgeCount.constants.d.mts.map +1 -0
- package/dist/components/badge-count/BadgeCount.constants.mjs +12 -0
- package/dist/components/badge-count/BadgeCount.constants.mjs.map +1 -0
- package/dist/components/badge-count/BadgeCount.d.cts +4 -0
- package/dist/components/badge-count/BadgeCount.d.cts.map +1 -0
- package/dist/components/badge-count/BadgeCount.d.mts +4 -0
- package/dist/components/badge-count/BadgeCount.d.mts.map +1 -0
- package/dist/components/badge-count/BadgeCount.mjs +22 -0
- package/dist/components/badge-count/BadgeCount.mjs.map +1 -0
- package/dist/components/badge-count/BadgeCount.types.cjs +15 -0
- package/dist/components/badge-count/BadgeCount.types.cjs.map +1 -0
- package/dist/components/badge-count/BadgeCount.types.d.cts +48 -0
- package/dist/components/badge-count/BadgeCount.types.d.cts.map +1 -0
- package/dist/components/badge-count/BadgeCount.types.d.mts +48 -0
- package/dist/components/badge-count/BadgeCount.types.d.mts.map +1 -0
- package/dist/components/badge-count/BadgeCount.types.mjs +12 -0
- package/dist/components/badge-count/BadgeCount.types.mjs.map +1 -0
- package/dist/components/badge-count/index.cjs +8 -0
- package/dist/components/badge-count/index.cjs.map +1 -0
- package/dist/components/badge-count/index.d.cts +4 -0
- package/dist/components/badge-count/index.d.cts.map +1 -0
- package/dist/components/badge-count/index.d.mts +4 -0
- package/dist/components/badge-count/index.d.mts.map +1 -0
- package/dist/components/badge-count/index.mjs +3 -0
- package/dist/components/badge-count/index.mjs.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.cjs +18 -0
- package/dist/components/badge-icon/BadgeIcon.cjs.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.d.cts +4 -0
- package/dist/components/badge-icon/BadgeIcon.d.cts.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.d.mts +4 -0
- package/dist/components/badge-icon/BadgeIcon.d.mts.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.mjs +19 -0
- package/dist/components/badge-icon/BadgeIcon.mjs.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.types.cjs +4 -0
- package/dist/components/badge-icon/BadgeIcon.types.cjs.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.types.d.cts +26 -0
- package/dist/components/badge-icon/BadgeIcon.types.d.cts.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.types.d.mts +26 -0
- package/dist/components/badge-icon/BadgeIcon.types.d.mts.map +1 -0
- package/dist/components/badge-icon/BadgeIcon.types.mjs +2 -0
- package/dist/components/badge-icon/BadgeIcon.types.mjs.map +1 -0
- package/dist/components/badge-icon/index.cjs +6 -0
- package/dist/components/badge-icon/index.cjs.map +1 -0
- package/dist/components/badge-icon/index.d.cts +3 -0
- package/dist/components/badge-icon/index.d.cts.map +1 -0
- package/dist/components/badge-icon/index.d.mts +3 -0
- package/dist/components/badge-icon/index.d.mts.map +1 -0
- package/dist/components/badge-icon/index.mjs +2 -0
- package/dist/components/badge-icon/index.mjs.map +1 -0
- package/dist/components/badge-status/BadgeStatus.cjs +32 -0
- package/dist/components/badge-status/BadgeStatus.cjs.map +1 -0
- package/dist/components/badge-status/BadgeStatus.constants.cjs +17 -0
- package/dist/components/badge-status/BadgeStatus.constants.cjs.map +1 -0
- package/dist/components/badge-status/BadgeStatus.constants.d.cts +4 -0
- package/dist/components/badge-status/BadgeStatus.constants.d.cts.map +1 -0
- package/dist/components/badge-status/BadgeStatus.constants.d.mts +4 -0
- package/dist/components/badge-status/BadgeStatus.constants.d.mts.map +1 -0
- package/dist/components/badge-status/BadgeStatus.constants.mjs +14 -0
- package/dist/components/badge-status/BadgeStatus.constants.mjs.map +1 -0
- package/dist/components/badge-status/BadgeStatus.d.cts +4 -0
- package/dist/components/badge-status/BadgeStatus.d.cts.map +1 -0
- package/dist/components/badge-status/BadgeStatus.d.mts +4 -0
- package/dist/components/badge-status/BadgeStatus.d.mts.map +1 -0
- package/dist/components/badge-status/BadgeStatus.mjs +33 -0
- package/dist/components/badge-status/BadgeStatus.mjs.map +1 -0
- package/dist/components/badge-status/BadgeStatus.types.cjs +29 -0
- package/dist/components/badge-status/BadgeStatus.types.cjs.map +1 -0
- package/dist/components/badge-status/BadgeStatus.types.d.cts +63 -0
- package/dist/components/badge-status/BadgeStatus.types.d.cts.map +1 -0
- package/dist/components/badge-status/BadgeStatus.types.d.mts +63 -0
- package/dist/components/badge-status/BadgeStatus.types.d.mts.map +1 -0
- package/dist/components/badge-status/BadgeStatus.types.mjs +26 -0
- package/dist/components/badge-status/BadgeStatus.types.mjs.map +1 -0
- package/dist/components/badge-status/index.cjs +9 -0
- package/dist/components/badge-status/index.cjs.map +1 -0
- package/dist/components/badge-status/index.d.cts +4 -0
- package/dist/components/badge-status/index.d.cts.map +1 -0
- package/dist/components/badge-status/index.d.mts +4 -0
- package/dist/components/badge-status/index.d.mts.map +1 -0
- package/dist/components/badge-status/index.mjs +3 -0
- package/dist/components/badge-status/index.mjs.map +1 -0
- package/dist/components/index.cjs +12 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +8 -0
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +8 -0
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +5 -0
- package/dist/components/index.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.BadgeCount = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
9
|
+
const text_1 = require("../text/index.cjs");
|
|
10
|
+
const BadgeCount_constants_1 = require("./BadgeCount.constants.cjs");
|
|
11
|
+
const BadgeCount_types_1 = require("./BadgeCount.types.cjs");
|
|
12
|
+
exports.BadgeCount = react_1.default.forwardRef(({ size = BadgeCount_types_1.BadgeCountSize.Md, count, max = 99, textProps, className = '', style, ...props }, ref) => {
|
|
13
|
+
const mergedClassName = (0, tw_merge_1.twMerge)(
|
|
14
|
+
// Base styles
|
|
15
|
+
'inline-flex bg-error-default rounded-lg items-center justify-center self-start', BadgeCount_constants_1.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], className);
|
|
16
|
+
return (react_1.default.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
17
|
+
react_1.default.createElement(text_1.Text, { variant: BadgeCount_constants_1.MAP_BADGECOUNT_SIZE_TEXTVARIANT[size], color: text_1.TextColor.ErrorInverse, fontWeight: text_1.FontWeight.Medium, ...textProps, className: `${textProps?.className || ''}`, asChild: true },
|
|
18
|
+
react_1.default.createElement("span", null, count > max ? `${max}+` : `${count}`))));
|
|
19
|
+
});
|
|
20
|
+
exports.BadgeCount.displayName = 'BadgeCount';
|
|
21
|
+
//# sourceMappingURL=BadgeCount.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,uDAA+C;AAC/C,4CAAsD;AACtD,qEAGgC;AAEhC,6DAAoD;AAEvC,QAAA,UAAU,GAAG,eAAK,CAAC,UAAU,CACxC,CACE,EACE,IAAI,GAAG,iCAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,2DAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,8BAAC,WAAI,IACH,OAAO,EAAE,sDAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,gBAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,iBAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,4CAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../text';\nimport {\n MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\nimport { BadgeCountSize } from './BadgeCount.types';\n\nexport const BadgeCount = React.forwardRef<HTMLDivElement, BadgeCountProps>(\n (\n {\n size = BadgeCountSize.Md,\n count,\n max = 99,\n textProps,\n className = '',\n style,\n ...props\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex bg-error-default rounded-lg items-center justify-center self-start',\n TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Text\n variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n color={TextColor.ErrorInverse}\n fontWeight={FontWeight.Medium}\n {...textProps}\n className={`${textProps?.className || ''}`}\n asChild\n >\n <span>{count > max ? `${max}+` : `${count}`}</span>\n </Text>\n </div>\n );\n },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER = exports.MAP_BADGECOUNT_SIZE_TEXTVARIANT = void 0;
|
|
4
|
+
const text_1 = require("../text/index.cjs");
|
|
5
|
+
const BadgeCount_types_1 = require("./BadgeCount.types.cjs");
|
|
6
|
+
// Mappings
|
|
7
|
+
exports.MAP_BADGECOUNT_SIZE_TEXTVARIANT = {
|
|
8
|
+
[BadgeCount_types_1.BadgeCountSize.Md]: text_1.TextVariant.BodyXs,
|
|
9
|
+
[BadgeCount_types_1.BadgeCountSize.Lg]: text_1.TextVariant.BodySm,
|
|
10
|
+
};
|
|
11
|
+
exports.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER = {
|
|
12
|
+
[BadgeCount_types_1.BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1',
|
|
13
|
+
[BadgeCount_types_1.BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=BadgeCount.constants.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.constants.cjs","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.constants.ts"],"names":[],"mappings":";;;AAAA,4CAAsC;AACtC,6DAAoD;AAEpD,WAAW;AACE,QAAA,+BAA+B,GAGxC;IACF,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;IACvC,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;CACxC,CAAC;AAEW,QAAA,oCAAoC,GAG7C;IACF,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,yBAAyB;IAC9C,CAAC,iCAAc,CAAC,EAAE,CAAC,EAAE,2BAA2B,EAAE,wEAAwE;CAC3H,CAAC","sourcesContent":["import { TextVariant } from '../text';\nimport { BadgeCountSize } from './BadgeCount.types';\n\n// Mappings\nexport const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<\n BadgeCountSize,\n TextVariant\n> = {\n [BadgeCountSize.Md]: TextVariant.BodyXs,\n [BadgeCountSize.Lg]: TextVariant.BodySm,\n};\n\nexport const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<\n BadgeCountSize,\n string\n> = {\n [BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1', // min-width 16px, height 14px, padding-vertical 0, padding-horizontal 4\n [BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6\n};\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { TextVariant } from "../text/index.cjs";
|
|
2
|
+
import { BadgeCountSize } from "./BadgeCount.types.cjs";
|
|
3
|
+
export declare const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<BadgeCountSize, TextVariant>;
|
|
4
|
+
export declare const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<BadgeCountSize, string>;
|
|
5
|
+
//# sourceMappingURL=BadgeCount.constants.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.constants.d.cts","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AACtC,OAAO,EAAE,cAAc,EAAE,+BAA2B;AAGpD,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAIZ,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAIP,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { TextVariant } from "../text/index.mjs";
|
|
2
|
+
import { BadgeCountSize } from "./BadgeCount.types.mjs";
|
|
3
|
+
export declare const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<BadgeCountSize, TextVariant>;
|
|
4
|
+
export declare const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<BadgeCountSize, string>;
|
|
5
|
+
//# sourceMappingURL=BadgeCount.constants.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.constants.d.mts","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AACtC,OAAO,EAAE,cAAc,EAAE,+BAA2B;AAGpD,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAClD,cAAc,EACd,WAAW,CAIZ,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAIP,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { TextVariant } from "../text/index.mjs";
|
|
2
|
+
import { BadgeCountSize } from "./BadgeCount.types.mjs";
|
|
3
|
+
// Mappings
|
|
4
|
+
export const MAP_BADGECOUNT_SIZE_TEXTVARIANT = {
|
|
5
|
+
[BadgeCountSize.Md]: TextVariant.BodyXs,
|
|
6
|
+
[BadgeCountSize.Lg]: TextVariant.BodySm,
|
|
7
|
+
};
|
|
8
|
+
export const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER = {
|
|
9
|
+
[BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1',
|
|
10
|
+
[BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=BadgeCount.constants.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.constants.mjs","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,0BAAgB;AACtC,OAAO,EAAE,cAAc,EAAE,+BAA2B;AAEpD,WAAW;AACX,MAAM,CAAC,MAAM,+BAA+B,GAGxC;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACvC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,yBAAyB;IAC9C,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,2BAA2B,EAAE,wEAAwE;CAC3H,CAAC","sourcesContent":["import { TextVariant } from '../text';\nimport { BadgeCountSize } from './BadgeCount.types';\n\n// Mappings\nexport const MAP_BADGECOUNT_SIZE_TEXTVARIANT: Record<\n BadgeCountSize,\n TextVariant\n> = {\n [BadgeCountSize.Md]: TextVariant.BodyXs,\n [BadgeCountSize.Lg]: TextVariant.BodySm,\n};\n\nexport const TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER: Record<\n BadgeCountSize,\n string\n> = {\n [BadgeCountSize.Md]: 'min-w-4 h-3.5 py-0 px-1', // min-width 16px, height 14px, padding-vertical 0, padding-horizontal 4\n [BadgeCountSize.Lg]: 'min-w-6 h-5 py-0.5 px-1.5', // min-width 24px, height 20px, padding-vertical 2, padding-horizontal 6\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.d.cts","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,qGAmCtB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.d.mts","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,qGAmCtB,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
function $importDefault(module) {
|
|
2
|
+
if (module?.__esModule) {
|
|
3
|
+
return module.default;
|
|
4
|
+
}
|
|
5
|
+
return module;
|
|
6
|
+
}
|
|
7
|
+
import $React from "react";
|
|
8
|
+
const React = $importDefault($React);
|
|
9
|
+
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
|
+
import { Text, TextColor, FontWeight } from "../text/index.mjs";
|
|
11
|
+
import { MAP_BADGECOUNT_SIZE_TEXTVARIANT, TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER } from "./BadgeCount.constants.mjs";
|
|
12
|
+
import { BadgeCountSize } from "./BadgeCount.types.mjs";
|
|
13
|
+
export const BadgeCount = React.forwardRef(({ size = BadgeCountSize.Md, count, max = 99, textProps, className = '', style, ...props }, ref) => {
|
|
14
|
+
const mergedClassName = twMerge(
|
|
15
|
+
// Base styles
|
|
16
|
+
'inline-flex bg-error-default rounded-lg items-center justify-center self-start', TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], className);
|
|
17
|
+
return (React.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
18
|
+
React.createElement(Text, { variant: MAP_BADGECOUNT_SIZE_TEXTVARIANT[size], color: TextColor.ErrorInverse, fontWeight: FontWeight.Medium, ...textProps, className: `${textProps?.className || ''}`, asChild: true },
|
|
19
|
+
React.createElement("span", null, count > max ? `${max}+` : `${count}`))));
|
|
20
|
+
});
|
|
21
|
+
BadgeCount.displayName = 'BadgeCount';
|
|
22
|
+
//# sourceMappingURL=BadgeCount.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.mjs","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,0BAAgB;AACtD,OAAO,EACL,+BAA+B,EAC/B,oCAAoC,EACrC,mCAA+B;AAEhC,OAAO,EAAE,cAAc,EAAE,+BAA2B;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,SAAS,GAAG,EAAE,EACd,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,gFAAgF,EAChF,oCAAoC,CAAC,IAAI,CAAC,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,oBAAC,IAAI,IACH,OAAO,EAAE,+BAA+B,CAAC,IAAI,CAAC,EAC9C,KAAK,EAAE,SAAS,CAAC,YAAY,EAC7B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,SAAS,EACb,SAAS,EAAE,GAAG,SAAS,EAAE,SAAS,IAAI,EAAE,EAAE,EAC1C,OAAO;YAEP,kCAAO,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAQ,CAC9C,CACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, TextColor, FontWeight } from '../text';\nimport {\n MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\nimport { BadgeCountSize } from './BadgeCount.types';\n\nexport const BadgeCount = React.forwardRef<HTMLDivElement, BadgeCountProps>(\n (\n {\n size = BadgeCountSize.Md,\n count,\n max = 99,\n textProps,\n className = '',\n style,\n ...props\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex bg-error-default rounded-lg items-center justify-center self-start',\n TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Text\n variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n color={TextColor.ErrorInverse}\n fontWeight={FontWeight.Medium}\n {...textProps}\n className={`${textProps?.className || ''}`}\n asChild\n >\n <span>{count > max ? `${max}+` : `${count}`}</span>\n </Text>\n </div>\n );\n },\n);\n\nBadgeCount.displayName = 'BadgeCount';\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BadgeCountSize = void 0;
|
|
4
|
+
var BadgeCountSize;
|
|
5
|
+
(function (BadgeCountSize) {
|
|
6
|
+
/**
|
|
7
|
+
* Represents a medium badge count (14px height).
|
|
8
|
+
*/
|
|
9
|
+
BadgeCountSize["Md"] = "md";
|
|
10
|
+
/**
|
|
11
|
+
* Represents a large badge count (20px height).
|
|
12
|
+
*/
|
|
13
|
+
BadgeCountSize["Lg"] = "lg";
|
|
14
|
+
})(BadgeCountSize || (exports.BadgeCountSize = BadgeCountSize = {}));
|
|
15
|
+
//# sourceMappingURL=BadgeCount.types.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.types.cjs","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.types.ts"],"names":[],"mappings":";;;AAIA,IAAY,cASX;AATD,WAAY,cAAc;IACxB;;OAEG;IACH,2BAAS,CAAA;IACT;;OAEG;IACH,2BAAS,CAAA;AACX,CAAC,EATW,cAAc,8BAAd,cAAc,QASzB","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../text';\n\nexport enum BadgeCountSize {\n /**\n * Represents a medium badge count (14px height).\n */\n Md = 'md',\n /**\n * Represents a large badge count (20px height).\n */\n Lg = 'lg',\n}\n\n/**\n * BadgeCount component props.\n */\nexport type BadgeCountProps = ComponentProps<'div'> & {\n /**\n * Optional prop to control the size of the BadgeCount\n * Different sizes map to specific height\n * @default IconSize.Md\n */\n size?: BadgeCountSize;\n /**\n * Required prop to show the count number\n */\n count: number;\n /**\n * Optional prop to determine the max the count can go up to.\n * If count > max, the count will be shown as \"max+\"\n * @default 99\n */\n max?: number;\n /**\n * Optional props to be passed to the Text component used by count\n */\n textProps?: Partial<TextProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the BadgeCount 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"]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { ComponentProps } from "react";
|
|
2
|
+
import type { TextProps } from "../text/index.cjs";
|
|
3
|
+
export declare enum BadgeCountSize {
|
|
4
|
+
/**
|
|
5
|
+
* Represents a medium badge count (14px height).
|
|
6
|
+
*/
|
|
7
|
+
Md = "md",
|
|
8
|
+
/**
|
|
9
|
+
* Represents a large badge count (20px height).
|
|
10
|
+
*/
|
|
11
|
+
Lg = "lg"
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* BadgeCount component props.
|
|
15
|
+
*/
|
|
16
|
+
export type BadgeCountProps = ComponentProps<'div'> & {
|
|
17
|
+
/**
|
|
18
|
+
* Optional prop to control the size of the BadgeCount
|
|
19
|
+
* Different sizes map to specific height
|
|
20
|
+
* @default IconSize.Md
|
|
21
|
+
*/
|
|
22
|
+
size?: BadgeCountSize;
|
|
23
|
+
/**
|
|
24
|
+
* Required prop to show the count number
|
|
25
|
+
*/
|
|
26
|
+
count: number;
|
|
27
|
+
/**
|
|
28
|
+
* Optional prop to determine the max the count can go up to.
|
|
29
|
+
* If count > max, the count will be shown as "max+"
|
|
30
|
+
* @default 99
|
|
31
|
+
*/
|
|
32
|
+
max?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Optional props to be passed to the Text component used by count
|
|
35
|
+
*/
|
|
36
|
+
textProps?: Partial<TextProps>;
|
|
37
|
+
/**
|
|
38
|
+
* Optional prop for additional CSS classes to be applied to the BadgeCount component.
|
|
39
|
+
* These classes will be merged with the component's default classes using twMerge.
|
|
40
|
+
*/
|
|
41
|
+
className?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Optional CSS styles to be applied to the component.
|
|
44
|
+
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
|
|
45
|
+
*/
|
|
46
|
+
style?: React.CSSProperties;
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=BadgeCount.types.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.types.d.cts","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,oBAAY,cAAc;IACxB;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;CACV;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { ComponentProps } from "react";
|
|
2
|
+
import type { TextProps } from "../text/index.mjs";
|
|
3
|
+
export declare enum BadgeCountSize {
|
|
4
|
+
/**
|
|
5
|
+
* Represents a medium badge count (14px height).
|
|
6
|
+
*/
|
|
7
|
+
Md = "md",
|
|
8
|
+
/**
|
|
9
|
+
* Represents a large badge count (20px height).
|
|
10
|
+
*/
|
|
11
|
+
Lg = "lg"
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* BadgeCount component props.
|
|
15
|
+
*/
|
|
16
|
+
export type BadgeCountProps = ComponentProps<'div'> & {
|
|
17
|
+
/**
|
|
18
|
+
* Optional prop to control the size of the BadgeCount
|
|
19
|
+
* Different sizes map to specific height
|
|
20
|
+
* @default IconSize.Md
|
|
21
|
+
*/
|
|
22
|
+
size?: BadgeCountSize;
|
|
23
|
+
/**
|
|
24
|
+
* Required prop to show the count number
|
|
25
|
+
*/
|
|
26
|
+
count: number;
|
|
27
|
+
/**
|
|
28
|
+
* Optional prop to determine the max the count can go up to.
|
|
29
|
+
* If count > max, the count will be shown as "max+"
|
|
30
|
+
* @default 99
|
|
31
|
+
*/
|
|
32
|
+
max?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Optional props to be passed to the Text component used by count
|
|
35
|
+
*/
|
|
36
|
+
textProps?: Partial<TextProps>;
|
|
37
|
+
/**
|
|
38
|
+
* Optional prop for additional CSS classes to be applied to the BadgeCount component.
|
|
39
|
+
* These classes will be merged with the component's default classes using twMerge.
|
|
40
|
+
*/
|
|
41
|
+
className?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Optional CSS styles to be applied to the component.
|
|
44
|
+
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
|
|
45
|
+
*/
|
|
46
|
+
style?: React.CSSProperties;
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=BadgeCount.types.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.types.d.mts","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,oBAAY,cAAc;IACxB;;OAEG;IACH,EAAE,OAAO;IACT;;OAEG;IACH,EAAE,OAAO;CACV;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export var BadgeCountSize;
|
|
2
|
+
(function (BadgeCountSize) {
|
|
3
|
+
/**
|
|
4
|
+
* Represents a medium badge count (14px height).
|
|
5
|
+
*/
|
|
6
|
+
BadgeCountSize["Md"] = "md";
|
|
7
|
+
/**
|
|
8
|
+
* Represents a large badge count (20px height).
|
|
9
|
+
*/
|
|
10
|
+
BadgeCountSize["Lg"] = "lg";
|
|
11
|
+
})(BadgeCountSize || (BadgeCountSize = {}));
|
|
12
|
+
//# sourceMappingURL=BadgeCount.types.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeCount.types.mjs","sourceRoot":"","sources":["../../../src/components/badge-count/BadgeCount.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAN,IAAY,cASX;AATD,WAAY,cAAc;IACxB;;OAEG;IACH,2BAAS,CAAA;IACT;;OAEG;IACH,2BAAS,CAAA;AACX,CAAC,EATW,cAAc,KAAd,cAAc,QASzB","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../text';\n\nexport enum BadgeCountSize {\n /**\n * Represents a medium badge count (14px height).\n */\n Md = 'md',\n /**\n * Represents a large badge count (20px height).\n */\n Lg = 'lg',\n}\n\n/**\n * BadgeCount component props.\n */\nexport type BadgeCountProps = ComponentProps<'div'> & {\n /**\n * Optional prop to control the size of the BadgeCount\n * Different sizes map to specific height\n * @default IconSize.Md\n */\n size?: BadgeCountSize;\n /**\n * Required prop to show the count number\n */\n count: number;\n /**\n * Optional prop to determine the max the count can go up to.\n * If count > max, the count will be shown as \"max+\"\n * @default 99\n */\n max?: number;\n /**\n * Optional props to be passed to the Text component used by count\n */\n textProps?: Partial<TextProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the BadgeCount 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"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BadgeCountSize = exports.BadgeCount = void 0;
|
|
4
|
+
var BadgeCount_1 = require("./BadgeCount.cjs");
|
|
5
|
+
Object.defineProperty(exports, "BadgeCount", { enumerable: true, get: function () { return BadgeCount_1.BadgeCount; } });
|
|
6
|
+
var BadgeCount_types_1 = require("./BadgeCount.types.cjs");
|
|
7
|
+
Object.defineProperty(exports, "BadgeCountSize", { enumerable: true, get: function () { return BadgeCount_types_1.BadgeCountSize; } });
|
|
8
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/badge-count/index.ts"],"names":[],"mappings":";;;AAAA,+CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAEnB,2DAAoD;AAA3C,kHAAA,cAAc,OAAA","sourcesContent":["export { BadgeCount } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount.types';\nexport { BadgeCountSize } from './BadgeCount.types';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/badge-count/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,+BAA2B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/badge-count/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B;AAC1D,OAAO,EAAE,cAAc,EAAE,+BAA2B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/badge-count/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAE1C,OAAO,EAAE,cAAc,EAAE,+BAA2B","sourcesContent":["export { BadgeCount } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount.types';\nexport { BadgeCountSize } from './BadgeCount.types';\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.BadgeIcon = void 0;
|
|
7
|
+
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
10
|
+
const icon_1 = require("../icon/index.cjs");
|
|
11
|
+
exports.BadgeIcon = react_1.default.forwardRef(({ iconName, iconProps, className = '', style, ...props }, ref) => {
|
|
12
|
+
const mergedClassName = (0, tw_merge_1.twMerge)('inline-flex h-4 w-4 bg-icon-default rounded-full items-center justify-center', className);
|
|
13
|
+
return (react_1.default.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
14
|
+
react_1.default.createElement(icon_1.Icon, { size: icon_1.IconSize.Xs, name: iconName, ...iconProps, className: (0, tw_merge_1.twMerge)(iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default
|
|
15
|
+
iconProps?.className) })));
|
|
16
|
+
});
|
|
17
|
+
exports.BadgeIcon.displayName = 'BadgeIcon';
|
|
18
|
+
//# sourceMappingURL=BadgeIcon.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.cjs","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,iEAAiE;AACjE,kDAA0B;AAE1B,uDAA+C;AAC/C,4CAAyC;AAG5B,QAAA,SAAS,GAAG,eAAK,CAAC,UAAU,CACvC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,8EAA8E,EAC9E,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,8BAAC,WAAI,IACH,IAAI,EAAE,eAAQ,CAAC,EAAE,EACjB,IAAI,EAAE,QAAQ,KACV,SAAS,EACb,SAAS,EAAE,IAAA,kBAAO,EAChB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,iEAAiE;YACpH,SAAS,EAAE,SAAS,CACrB,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconSize } from '../icon';\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = React.forwardRef<HTMLDivElement, BadgeIconProps>(\n ({ iconName, iconProps, className = '', style, ...props }, ref) => {\n const mergedClassName = twMerge(\n 'inline-flex h-4 w-4 bg-icon-default rounded-full items-center justify-center',\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Icon\n size={IconSize.Xs}\n name={iconName}\n {...iconProps}\n className={twMerge(\n iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default\n iconProps?.className,\n )}\n />\n </div>\n );\n },\n);\n\nBadgeIcon.displayName = 'BadgeIcon';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.d.cts","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,oGAqBrB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.d.mts","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,oGAqBrB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function $importDefault(module) {
|
|
2
|
+
if (module?.__esModule) {
|
|
3
|
+
return module.default;
|
|
4
|
+
}
|
|
5
|
+
return module;
|
|
6
|
+
}
|
|
7
|
+
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
|
|
8
|
+
import $React from "react";
|
|
9
|
+
const React = $importDefault($React);
|
|
10
|
+
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
|
+
import { Icon, IconSize } from "../icon/index.mjs";
|
|
12
|
+
export const BadgeIcon = React.forwardRef(({ iconName, iconProps, className = '', style, ...props }, ref) => {
|
|
13
|
+
const mergedClassName = twMerge('inline-flex h-4 w-4 bg-icon-default rounded-full items-center justify-center', className);
|
|
14
|
+
return (React.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
15
|
+
React.createElement(Icon, { size: IconSize.Xs, name: iconName, ...iconProps, className: twMerge(iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default
|
|
16
|
+
iconProps?.className) })));
|
|
17
|
+
});
|
|
18
|
+
BadgeIcon.displayName = 'BadgeIcon';
|
|
19
|
+
//# sourceMappingURL=BadgeIcon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.mjs","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,iEAAiE;AACjE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,0BAAgB;AAGzC,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,eAAe,GAAG,OAAO,CAC7B,8EAA8E,EAC9E,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,IAAI,EAAE,QAAQ,KACV,SAAS,EACb,SAAS,EAAE,OAAO,CAChB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,iEAAiE;YACpH,SAAS,EAAE,SAAS,CACrB,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon, IconSize } from '../icon';\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = React.forwardRef<HTMLDivElement, BadgeIconProps>(\n ({ iconName, iconProps, className = '', style, ...props }, ref) => {\n const mergedClassName = twMerge(\n 'inline-flex h-4 w-4 bg-icon-default rounded-full items-center justify-center',\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Icon\n size={IconSize.Xs}\n name={iconName}\n {...iconProps}\n className={twMerge(\n iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default\n iconProps?.className,\n )}\n />\n </div>\n );\n },\n);\n\nBadgeIcon.displayName = 'BadgeIcon';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.types.ts"],"names":[],"mappings":";;AACA,4CAA8C","sourcesContent":["import type { ComponentProps } from 'react';\nimport { IconName, IconProps } from '../icon';\n\n/**\n * BadgeIcon component props.\n */\nexport type BadgeIconProps = ComponentProps<'div'> & {\n /**\n * Required prop to specify an icon to show\n */\n iconName: IconName;\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Omit<IconProps, 'name'>;\n /**\n * Optional prop for additional CSS classes to be applied to the BadgeIcon 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"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ComponentProps } from "react";
|
|
2
|
+
import { IconName, IconProps } from "../icon/index.cjs";
|
|
3
|
+
/**
|
|
4
|
+
* BadgeIcon component props.
|
|
5
|
+
*/
|
|
6
|
+
export type BadgeIconProps = ComponentProps<'div'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Required prop to specify an icon to show
|
|
9
|
+
*/
|
|
10
|
+
iconName: IconName;
|
|
11
|
+
/**
|
|
12
|
+
* Optional prop to pass additional properties to the icon
|
|
13
|
+
*/
|
|
14
|
+
iconProps?: Omit<IconProps, 'name'>;
|
|
15
|
+
/**
|
|
16
|
+
* Optional prop for additional CSS classes to be applied to the BadgeIcon component.
|
|
17
|
+
* These classes will be merged with the component's default classes using twMerge.
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Optional CSS styles to be applied to the component.
|
|
22
|
+
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
|
|
23
|
+
*/
|
|
24
|
+
style?: React.CSSProperties;
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=BadgeIcon.types.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAC5C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACnD;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ComponentProps } from "react";
|
|
2
|
+
import { IconName, IconProps } from "../icon/index.mjs";
|
|
3
|
+
/**
|
|
4
|
+
* BadgeIcon component props.
|
|
5
|
+
*/
|
|
6
|
+
export type BadgeIconProps = ComponentProps<'div'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Required prop to specify an icon to show
|
|
9
|
+
*/
|
|
10
|
+
iconName: IconName;
|
|
11
|
+
/**
|
|
12
|
+
* Optional prop to pass additional properties to the icon
|
|
13
|
+
*/
|
|
14
|
+
iconProps?: Omit<IconProps, 'name'>;
|
|
15
|
+
/**
|
|
16
|
+
* Optional prop for additional CSS classes to be applied to the BadgeIcon component.
|
|
17
|
+
* These classes will be merged with the component's default classes using twMerge.
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Optional CSS styles to be applied to the component.
|
|
22
|
+
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
|
|
23
|
+
*/
|
|
24
|
+
style?: React.CSSProperties;
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=BadgeIcon.types.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAC5C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACnD;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/badge-icon/BadgeIcon.types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB","sourcesContent":["import type { ComponentProps } from 'react';\nimport { IconName, IconProps } from '../icon';\n\n/**\n * BadgeIcon component props.\n */\nexport type BadgeIconProps = ComponentProps<'div'> & {\n /**\n * Required prop to specify an icon to show\n */\n iconName: IconName;\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Omit<IconProps, 'name'>;\n /**\n * Optional prop for additional CSS classes to be applied to the BadgeIcon 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"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.BadgeIcon = void 0;
|
|
4
|
+
var BadgeIcon_1 = require("./BadgeIcon.cjs");
|
|
5
|
+
Object.defineProperty(exports, "BadgeIcon", { enumerable: true, get: function () { return BadgeIcon_1.BadgeIcon; } });
|
|
6
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/badge-icon/index.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAA/B,sGAAA,SAAS,OAAA","sourcesContent":["export { BadgeIcon } from './BadgeIcon';\nexport type { BadgeIconProps } from './BadgeIcon.types';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/badge-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,wBAAoB;AACxC,YAAY,EAAE,cAAc,EAAE,8BAA0B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/badge-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,wBAAoB;AACxC,YAAY,EAAE,cAAc,EAAE,8BAA0B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/badge-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,wBAAoB","sourcesContent":["export { BadgeIcon } from './BadgeIcon';\nexport type { BadgeIconProps } from './BadgeIcon.types';\n"]}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.BadgeStatus = void 0;
|
|
7
|
+
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
|
|
8
|
+
const react_1 = __importDefault(require("react"));
|
|
9
|
+
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
10
|
+
const BadgeStatus_constants_1 = require("./BadgeStatus.constants.cjs");
|
|
11
|
+
const BadgeStatus_types_1 = require("./BadgeStatus.types.cjs");
|
|
12
|
+
exports.BadgeStatus = react_1.default.forwardRef(({ status, size = BadgeStatus_types_1.BadgeStatusSize.Md, hasBorder = true, className, style, ...props }, ref) => {
|
|
13
|
+
const mergedClassName = (0, tw_merge_1.twMerge)(
|
|
14
|
+
// Base styles
|
|
15
|
+
'inline-flex relative rounded-full',
|
|
16
|
+
// hasBorder style
|
|
17
|
+
hasBorder ? 'border-2 border-background-default' : '',
|
|
18
|
+
// Custom classes
|
|
19
|
+
className);
|
|
20
|
+
const mergedCircleClassName = (0, tw_merge_1.twMerge)(
|
|
21
|
+
// Base styles
|
|
22
|
+
'rounded-full border-2 z-10',
|
|
23
|
+
// Size styles
|
|
24
|
+
BadgeStatus_constants_1.CLASSMAP_BADGESTATUS_SIZE[size],
|
|
25
|
+
// Circle with semantics style
|
|
26
|
+
BadgeStatus_constants_1.CLASSMAP_BADGESTATUS_STATUS_CIRCLE[status]);
|
|
27
|
+
return (react_1.default.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
28
|
+
react_1.default.createElement("div", { className: "bg-background-default absolute top-0 left-0 bottom-0 right-0 rounded-full" }),
|
|
29
|
+
react_1.default.createElement("div", { className: mergedCircleClassName })));
|
|
30
|
+
});
|
|
31
|
+
exports.BadgeStatus.displayName = 'BadgeStatus';
|
|
32
|
+
//# sourceMappingURL=BadgeStatus.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BadgeStatus.cjs","sourceRoot":"","sources":["../../../src/components/badge-status/BadgeStatus.tsx"],"names":[],"mappings":";;;;;;AAAA,iEAAiE;AACjE,kDAA0B;AAE1B,uDAA+C;AAC/C,uEAGiC;AAEjC,+DAAsD;AAEzC,QAAA,WAAW,GAAG,eAAK,CAAC,UAAU,CACzC,CACE,EACE,MAAM,EACN,IAAI,GAAG,mCAAe,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,mCAAmC;IACnC,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,EAAC,2EAA2E,GAAG;QAC7F,uCAAK,SAAS,EAAE,qBAAqB,GAAI,CACrC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n CLASSMAP_BADGESTATUS_STATUS_CIRCLE,\n CLASSMAP_BADGESTATUS_SIZE,\n} from './BadgeStatus.constants';\nimport type { BadgeStatusProps } from './BadgeStatus.types';\nimport { BadgeStatusSize } from './BadgeStatus.types';\n\nexport const BadgeStatus = React.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 relative 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 'rounded-full border-2 z-10',\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=\"bg-background-default absolute top-0 left-0 bottom-0 right-0 rounded-full\" />\n <div className={mergedCircleClassName} />\n </div>\n );\n },\n);\n\nBadgeStatus.displayName = 'BadgeStatus';\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.CLASSMAP_BADGESTATUS_SIZE = exports.CLASSMAP_BADGESTATUS_STATUS_CIRCLE = void 0;
|
|
4
|
+
const BadgeStatus_types_1 = require("./BadgeStatus.types.cjs");
|
|
5
|
+
// Mappings
|
|
6
|
+
exports.CLASSMAP_BADGESTATUS_STATUS_CIRCLE = {
|
|
7
|
+
[BadgeStatus_types_1.BadgeStatusStatus.Active]: 'bg-success-default border-success-default',
|
|
8
|
+
[BadgeStatus_types_1.BadgeStatusStatus.PartiallyActive]: 'bg-background-default border-success-default',
|
|
9
|
+
[BadgeStatus_types_1.BadgeStatusStatus.Inactive]: 'bg-icon-muted border-icon-muted',
|
|
10
|
+
[BadgeStatus_types_1.BadgeStatusStatus.New]: 'bg-primary-default border-primary-default',
|
|
11
|
+
[BadgeStatus_types_1.BadgeStatusStatus.Attention]: 'bg-error-default border-error-default',
|
|
12
|
+
};
|
|
13
|
+
exports.CLASSMAP_BADGESTATUS_SIZE = {
|
|
14
|
+
[BadgeStatus_types_1.BadgeStatusSize.Md]: 'h-2 w-2',
|
|
15
|
+
[BadgeStatus_types_1.BadgeStatusSize.Lg]: 'h-2.5 w-2.5', // 10px width and height
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=BadgeStatus.constants.cjs.map
|