@sproutsocial/seeds-react-badge 2.0.37 → 2.0.38
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/badge.css +76 -0
- package/dist/esm/index.js +91 -8
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +91 -8
- package/dist/index.js.map +1 -1
- package/package.json +7 -6
package/dist/badge.css
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Seeds Badge component classes
|
|
3
|
+
* Use these instead of writing out individual Tailwind utility classes.
|
|
4
|
+
*
|
|
5
|
+
* Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
|
|
6
|
+
* CSS variable definitions and dark mode support.
|
|
7
|
+
*
|
|
8
|
+
* All rules are wrapped in `@layer components` so that consumer Tailwind
|
|
9
|
+
* utilities (unlayered) win the cascade over these styles.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
@layer components {
|
|
13
|
+
.seeds-badge {
|
|
14
|
+
font-family: var(--font-family);
|
|
15
|
+
border-radius: 9999px;
|
|
16
|
+
line-height: 16px;
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
color: var(--color-text-body);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.seeds-badge-sm {
|
|
24
|
+
font-size: var(--font-size-100);
|
|
25
|
+
padding: var(--space-0) var(--space-200);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.seeds-badge-lg {
|
|
29
|
+
font-size: var(--font-size-200);
|
|
30
|
+
padding: var(--space-300);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.seeds-badge-green {
|
|
34
|
+
background: var(--color-container-bg-decorative-green);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.seeds-badge-blue {
|
|
38
|
+
background: var(--color-container-bg-decorative-blue);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.seeds-badge-purple {
|
|
42
|
+
background: var(--color-container-bg-decorative-purple);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.seeds-badge-yellow {
|
|
46
|
+
background: var(--color-container-bg-decorative-yellow);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.seeds-badge-orange {
|
|
50
|
+
background: var(--color-container-bg-decorative-orange);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.seeds-badge-red {
|
|
54
|
+
background: var(--color-container-bg-decorative-red);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.seeds-badge-neutral {
|
|
58
|
+
background: var(--color-container-bg-decorative-neutral);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.seeds-badge-magenta {
|
|
62
|
+
background: var(--color-container-bg-decorative-magenta);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.seeds-badge-pink {
|
|
66
|
+
background: var(--color-container-bg-decorative-pink);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.seeds-badge-aqua {
|
|
70
|
+
background: var(--color-container-bg-decorative-aqua);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.seeds-badge-teal {
|
|
74
|
+
background: var(--color-container-bg-decorative-teal);
|
|
75
|
+
}
|
|
76
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
// src/Badge.tsx
|
|
2
|
-
import
|
|
2
|
+
import "react";
|
|
3
|
+
|
|
4
|
+
// src/BadgeHybrid.tsx
|
|
5
|
+
import "react";
|
|
6
|
+
import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
|
|
3
7
|
|
|
4
8
|
// src/styles.ts
|
|
5
9
|
import styled from "styled-components";
|
|
@@ -18,23 +22,49 @@ var StyledBadge = styled.span`
|
|
|
18
22
|
${COMMON};
|
|
19
23
|
`;
|
|
20
24
|
|
|
21
|
-
// src/
|
|
25
|
+
// src/BadgeTailwind.tsx
|
|
26
|
+
import "react";
|
|
27
|
+
import { Icon } from "@sproutsocial/seeds-react-icon";
|
|
22
28
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
23
|
-
|
|
29
|
+
function cn(...inputs) {
|
|
30
|
+
const classes = [];
|
|
31
|
+
for (const input of inputs) {
|
|
32
|
+
if (!input) continue;
|
|
33
|
+
if (typeof input === "string") {
|
|
34
|
+
classes.push(input);
|
|
35
|
+
} else if (typeof input === "object") {
|
|
36
|
+
for (const [key, value] of Object.entries(input)) {
|
|
37
|
+
if (value) {
|
|
38
|
+
classes.push(key);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return classes.join(" ");
|
|
44
|
+
}
|
|
45
|
+
var sizeClasses = {
|
|
46
|
+
small: "seeds-badge-sm",
|
|
47
|
+
large: "seeds-badge-lg"
|
|
48
|
+
};
|
|
49
|
+
var BadgeTailwind = ({
|
|
24
50
|
children,
|
|
25
51
|
iconName,
|
|
26
52
|
size = "small",
|
|
27
53
|
badgeColor = "blue",
|
|
28
|
-
|
|
54
|
+
className,
|
|
29
55
|
...rest
|
|
30
56
|
}) => {
|
|
57
|
+
const classes = cn(
|
|
58
|
+
"seeds-badge",
|
|
59
|
+
sizeClasses[size] || sizeClasses.small,
|
|
60
|
+
`seeds-badge-${badgeColor}`,
|
|
61
|
+
className
|
|
62
|
+
);
|
|
31
63
|
return /* @__PURE__ */ jsxs(
|
|
32
|
-
|
|
64
|
+
"span",
|
|
33
65
|
{
|
|
34
|
-
|
|
35
|
-
badgeColor,
|
|
66
|
+
className: classes,
|
|
36
67
|
"data-qa-badge": true,
|
|
37
|
-
color,
|
|
38
68
|
...rest,
|
|
39
69
|
children: [
|
|
40
70
|
iconName ? /* @__PURE__ */ jsx(
|
|
@@ -51,6 +81,59 @@ var Badge = ({
|
|
|
51
81
|
}
|
|
52
82
|
);
|
|
53
83
|
};
|
|
84
|
+
BadgeTailwind.displayName = "BadgeTailwind";
|
|
85
|
+
|
|
86
|
+
// src/BadgeHybrid.tsx
|
|
87
|
+
import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
|
|
88
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
89
|
+
var BadgeHybrid = ({
|
|
90
|
+
children,
|
|
91
|
+
iconName,
|
|
92
|
+
size = "small",
|
|
93
|
+
badgeColor = "blue",
|
|
94
|
+
color,
|
|
95
|
+
...rest
|
|
96
|
+
}) => {
|
|
97
|
+
if (color !== void 0 || hasStyledProps(rest)) {
|
|
98
|
+
return /* @__PURE__ */ jsxs2(
|
|
99
|
+
StyledBadge,
|
|
100
|
+
{
|
|
101
|
+
size,
|
|
102
|
+
badgeColor,
|
|
103
|
+
"data-qa-badge": true,
|
|
104
|
+
color,
|
|
105
|
+
...rest,
|
|
106
|
+
children: [
|
|
107
|
+
iconName ? /* @__PURE__ */ jsx2(
|
|
108
|
+
Icon2,
|
|
109
|
+
{
|
|
110
|
+
mr: 200,
|
|
111
|
+
name: iconName,
|
|
112
|
+
size: size === "small" ? "mini" : "small",
|
|
113
|
+
"aria-hidden": true
|
|
114
|
+
}
|
|
115
|
+
) : null,
|
|
116
|
+
children
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
return /* @__PURE__ */ jsx2(
|
|
122
|
+
BadgeTailwind,
|
|
123
|
+
{
|
|
124
|
+
size,
|
|
125
|
+
badgeColor,
|
|
126
|
+
iconName,
|
|
127
|
+
...rest,
|
|
128
|
+
children
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
|
+
var BadgeHybrid_default = BadgeHybrid;
|
|
133
|
+
|
|
134
|
+
// src/Badge.tsx
|
|
135
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
136
|
+
var Badge = (props) => /* @__PURE__ */ jsx3(BadgeHybrid_default, { ...props });
|
|
54
137
|
var Badge_default = Badge;
|
|
55
138
|
|
|
56
139
|
// src/constants.ts
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge.tsx","../../src/styles.ts","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { StyledBadge } from \"./styles\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\nconst
|
|
1
|
+
{"version":3,"sources":["../../src/Badge.tsx","../../src/BadgeHybrid.tsx","../../src/styles.ts","../../src/BadgeTailwind.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport BadgeHybrid from \"./BadgeHybrid\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\n/**\n * Badge component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props, a custom color, or styled() extension).\n */\nconst Badge = (props: TypeBadgeProps) => <BadgeHybrid {...props} />;\n\nexport default Badge;\n","/**\n * Hybrid Badge Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { StyledBadge } from \"./styles\"; // Styled-components version\nimport { BadgeTailwind } from \"./BadgeTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\nconst BadgeHybrid = ({\n children,\n iconName,\n size = \"small\",\n badgeColor = \"blue\",\n color,\n ...rest\n}: TypeBadgeProps) => {\n // A custom `color` is a styled-system prop, so it routes through the\n // styled-components path (matching Button semantics).\n if (color !== undefined || hasStyledProps(rest)) {\n return (\n <StyledBadge\n size={size}\n badgeColor={badgeColor}\n data-qa-badge\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n {iconName ? (\n <Icon\n mr={200}\n name={iconName}\n size={size === \"small\" ? \"mini\" : \"small\"}\n aria-hidden\n />\n ) : null}\n {children}\n </StyledBadge>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return (\n <BadgeTailwind\n size={size}\n badgeColor={badgeColor}\n iconName={iconName}\n {...rest}\n >\n {children}\n </BadgeTailwind>\n );\n};\n\nexport default BadgeHybrid;\n","import styled from \"styled-components\";\n\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledBadge = styled.span<{\n badgeColor: string;\n size: string;\n}>`\n font-family: ${(p) => p.theme.fontFamily};\n ${(p) =>\n p.size === \"small\" ? p.theme.typography[100] : p.theme.typography[200]};\n border-radius: 9999px;\n line-height: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ${(p) => p.theme.colors.text.body};\n background: ${(p) =>\n p.theme.colors.container.background.decorative[p.badgeColor]};\n padding: ${(p) =>\n p.size === \"small\"\n ? `${p.theme.space[0]} ${p.theme.space[200]}`\n : `${p.theme.space[300]}`};\n ${COMMON};\n`;\n","/**\n * Tailwind CSS implementation of Badge component\n * Uses Seeds badge CSS classes from badge.css\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nconst sizeClasses: Record<string, string> = {\n small: \"seeds-badge-sm\",\n large: \"seeds-badge-lg\",\n};\n\nexport const BadgeTailwind = ({\n children,\n iconName,\n size = \"small\",\n badgeColor = \"blue\",\n className,\n ...rest\n}: TypeBadgeProps) => {\n const classes = cn(\n \"seeds-badge\",\n sizeClasses[size] || sizeClasses.small,\n `seeds-badge-${badgeColor}`,\n className\n );\n\n return (\n <span\n className={classes}\n data-qa-badge\n {...(rest as React.ComponentPropsWithoutRef<\"span\">)}\n >\n {iconName ? (\n <Icon\n mr={200}\n name={iconName}\n size={size === \"small\" ? \"mini\" : \"small\"}\n aria-hidden\n />\n ) : null}\n {children}\n </span>\n );\n};\n\nBadgeTailwind.displayName = \"BadgeTailwind\";\n","const defaultPurple = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.purple\",\n};\n\nconst suggestion = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.blue\",\n};\n\nconst passive = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.neutral\",\n};\n\nconst primary = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.blue\",\n};\n\nconst secondary = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.yellow\",\n};\n\nconst common = {\n color: \"colors.text.inverse\",\n background: \"colors.aqua.600\",\n};\n\nconst approval = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.orange\",\n};\n\n//Deprecated former \"types\"\n\n/**\n * @deprecated Use badgeColor instead\n */\n\nexport const legacyBadgeColors = {\n primary,\n secondary,\n passive,\n common,\n approval,\n default: defaultPurple,\n suggestion,\n};\n\nexport const badgeColors = {\n green: \"green\",\n blue: \"blue\",\n purple: \"purple\",\n yellow: \"yellow\",\n orange: \"orange\",\n red: \"red\",\n neutral: \"neutral\",\n magenta: \"magenta\",\n pink: \"pink\",\n aqua: \"aqua\",\n teal: \"teal\",\n} as const;\n","import Badge from \"./Badge\";\n\nexport default Badge;\nexport { Badge };\nexport * from \"./BadgeTypes\";\nexport * from \"./constants\";\n"],"mappings":"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","names":["Icon","jsx","jsxs","Icon","jsx"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -59,6 +59,11 @@ interface TypeBadgeProps extends TypeBaseBadgeProps {
|
|
|
59
59
|
iconName?: TypeIconName;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Badge component. Automatically routes between the Tailwind implementation
|
|
64
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
65
|
+
* system props, a custom color, or styled() extension).
|
|
66
|
+
*/
|
|
67
|
+
declare const Badge: (props: TypeBadgeProps) => react_jsx_runtime.JSX.Element;
|
|
63
68
|
|
|
64
69
|
export { Badge, type TypeBadgeColor, type TypeBadgeProps, type TypeBaseBadgeProps, badgeColors, Badge as default, legacyBadgeColors };
|
package/dist/index.d.ts
CHANGED
|
@@ -59,6 +59,11 @@ interface TypeBadgeProps extends TypeBaseBadgeProps {
|
|
|
59
59
|
iconName?: TypeIconName;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
/**
|
|
63
|
+
* Badge component. Automatically routes between the Tailwind implementation
|
|
64
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
65
|
+
* system props, a custom color, or styled() extension).
|
|
66
|
+
*/
|
|
67
|
+
declare const Badge: (props: TypeBadgeProps) => react_jsx_runtime.JSX.Element;
|
|
63
68
|
|
|
64
69
|
export { Badge, type TypeBadgeColor, type TypeBadgeProps, type TypeBaseBadgeProps, badgeColors, Badge as default, legacyBadgeColors };
|
package/dist/index.js
CHANGED
|
@@ -38,7 +38,11 @@ __export(index_exports, {
|
|
|
38
38
|
module.exports = __toCommonJS(index_exports);
|
|
39
39
|
|
|
40
40
|
// src/Badge.tsx
|
|
41
|
-
var
|
|
41
|
+
var React3 = require("react");
|
|
42
|
+
|
|
43
|
+
// src/BadgeHybrid.tsx
|
|
44
|
+
var React2 = require("react");
|
|
45
|
+
var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
|
|
42
46
|
|
|
43
47
|
// src/styles.ts
|
|
44
48
|
var import_styled_components = __toESM(require("styled-components"));
|
|
@@ -57,23 +61,49 @@ var StyledBadge = import_styled_components.default.span`
|
|
|
57
61
|
${import_seeds_react_system_props.COMMON};
|
|
58
62
|
`;
|
|
59
63
|
|
|
60
|
-
// src/
|
|
64
|
+
// src/BadgeTailwind.tsx
|
|
65
|
+
var React = require("react");
|
|
66
|
+
var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
|
|
61
67
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
62
|
-
|
|
68
|
+
function cn(...inputs) {
|
|
69
|
+
const classes = [];
|
|
70
|
+
for (const input of inputs) {
|
|
71
|
+
if (!input) continue;
|
|
72
|
+
if (typeof input === "string") {
|
|
73
|
+
classes.push(input);
|
|
74
|
+
} else if (typeof input === "object") {
|
|
75
|
+
for (const [key, value] of Object.entries(input)) {
|
|
76
|
+
if (value) {
|
|
77
|
+
classes.push(key);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
return classes.join(" ");
|
|
83
|
+
}
|
|
84
|
+
var sizeClasses = {
|
|
85
|
+
small: "seeds-badge-sm",
|
|
86
|
+
large: "seeds-badge-lg"
|
|
87
|
+
};
|
|
88
|
+
var BadgeTailwind = ({
|
|
63
89
|
children,
|
|
64
90
|
iconName,
|
|
65
91
|
size = "small",
|
|
66
92
|
badgeColor = "blue",
|
|
67
|
-
|
|
93
|
+
className,
|
|
68
94
|
...rest
|
|
69
95
|
}) => {
|
|
96
|
+
const classes = cn(
|
|
97
|
+
"seeds-badge",
|
|
98
|
+
sizeClasses[size] || sizeClasses.small,
|
|
99
|
+
`seeds-badge-${badgeColor}`,
|
|
100
|
+
className
|
|
101
|
+
);
|
|
70
102
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
71
|
-
|
|
103
|
+
"span",
|
|
72
104
|
{
|
|
73
|
-
|
|
74
|
-
badgeColor,
|
|
105
|
+
className: classes,
|
|
75
106
|
"data-qa-badge": true,
|
|
76
|
-
color,
|
|
77
107
|
...rest,
|
|
78
108
|
children: [
|
|
79
109
|
iconName ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -90,6 +120,59 @@ var Badge = ({
|
|
|
90
120
|
}
|
|
91
121
|
);
|
|
92
122
|
};
|
|
123
|
+
BadgeTailwind.displayName = "BadgeTailwind";
|
|
124
|
+
|
|
125
|
+
// src/BadgeHybrid.tsx
|
|
126
|
+
var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
|
|
127
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
128
|
+
var BadgeHybrid = ({
|
|
129
|
+
children,
|
|
130
|
+
iconName,
|
|
131
|
+
size = "small",
|
|
132
|
+
badgeColor = "blue",
|
|
133
|
+
color,
|
|
134
|
+
...rest
|
|
135
|
+
}) => {
|
|
136
|
+
if (color !== void 0 || (0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
|
|
137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
138
|
+
StyledBadge,
|
|
139
|
+
{
|
|
140
|
+
size,
|
|
141
|
+
badgeColor,
|
|
142
|
+
"data-qa-badge": true,
|
|
143
|
+
color,
|
|
144
|
+
...rest,
|
|
145
|
+
children: [
|
|
146
|
+
iconName ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
147
|
+
import_seeds_react_icon2.Icon,
|
|
148
|
+
{
|
|
149
|
+
mr: 200,
|
|
150
|
+
name: iconName,
|
|
151
|
+
size: size === "small" ? "mini" : "small",
|
|
152
|
+
"aria-hidden": true
|
|
153
|
+
}
|
|
154
|
+
) : null,
|
|
155
|
+
children
|
|
156
|
+
]
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
}
|
|
160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
161
|
+
BadgeTailwind,
|
|
162
|
+
{
|
|
163
|
+
size,
|
|
164
|
+
badgeColor,
|
|
165
|
+
iconName,
|
|
166
|
+
...rest,
|
|
167
|
+
children
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
};
|
|
171
|
+
var BadgeHybrid_default = BadgeHybrid;
|
|
172
|
+
|
|
173
|
+
// src/Badge.tsx
|
|
174
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
175
|
+
var Badge = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BadgeHybrid_default, { ...props });
|
|
93
176
|
var Badge_default = Badge;
|
|
94
177
|
|
|
95
178
|
// src/constants.ts
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Badge.tsx","../src/styles.ts","../src/constants.ts"],"sourcesContent":["import Badge from \"./Badge\";\n\nexport default Badge;\nexport { Badge };\nexport * from \"./BadgeTypes\";\nexport * from \"./constants\";\n","import { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { StyledBadge } from \"./styles\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\nconst
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Badge.tsx","../src/BadgeHybrid.tsx","../src/styles.ts","../src/BadgeTailwind.tsx","../src/constants.ts"],"sourcesContent":["import Badge from \"./Badge\";\n\nexport default Badge;\nexport { Badge };\nexport * from \"./BadgeTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport BadgeHybrid from \"./BadgeHybrid\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\n/**\n * Badge component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props, a custom color, or styled() extension).\n */\nconst Badge = (props: TypeBadgeProps) => <BadgeHybrid {...props} />;\n\nexport default Badge;\n","/**\n * Hybrid Badge Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { StyledBadge } from \"./styles\"; // Styled-components version\nimport { BadgeTailwind } from \"./BadgeTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\nconst BadgeHybrid = ({\n children,\n iconName,\n size = \"small\",\n badgeColor = \"blue\",\n color,\n ...rest\n}: TypeBadgeProps) => {\n // A custom `color` is a styled-system prop, so it routes through the\n // styled-components path (matching Button semantics).\n if (color !== undefined || hasStyledProps(rest)) {\n return (\n <StyledBadge\n size={size}\n badgeColor={badgeColor}\n data-qa-badge\n // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n color={color}\n {...rest}\n >\n {iconName ? (\n <Icon\n mr={200}\n name={iconName}\n size={size === \"small\" ? \"mini\" : \"small\"}\n aria-hidden\n />\n ) : null}\n {children}\n </StyledBadge>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return (\n <BadgeTailwind\n size={size}\n badgeColor={badgeColor}\n iconName={iconName}\n {...rest}\n >\n {children}\n </BadgeTailwind>\n );\n};\n\nexport default BadgeHybrid;\n","import styled from \"styled-components\";\n\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledBadge = styled.span<{\n badgeColor: string;\n size: string;\n}>`\n font-family: ${(p) => p.theme.fontFamily};\n ${(p) =>\n p.size === \"small\" ? p.theme.typography[100] : p.theme.typography[200]};\n border-radius: 9999px;\n line-height: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ${(p) => p.theme.colors.text.body};\n background: ${(p) =>\n p.theme.colors.container.background.decorative[p.badgeColor]};\n padding: ${(p) =>\n p.size === \"small\"\n ? `${p.theme.space[0]} ${p.theme.space[200]}`\n : `${p.theme.space[300]}`};\n ${COMMON};\n`;\n","/**\n * Tailwind CSS implementation of Badge component\n * Uses Seeds badge CSS classes from badge.css\n */\n\nimport * as React from \"react\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeBadgeProps } from \"./BadgeTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nconst sizeClasses: Record<string, string> = {\n small: \"seeds-badge-sm\",\n large: \"seeds-badge-lg\",\n};\n\nexport const BadgeTailwind = ({\n children,\n iconName,\n size = \"small\",\n badgeColor = \"blue\",\n className,\n ...rest\n}: TypeBadgeProps) => {\n const classes = cn(\n \"seeds-badge\",\n sizeClasses[size] || sizeClasses.small,\n `seeds-badge-${badgeColor}`,\n className\n );\n\n return (\n <span\n className={classes}\n data-qa-badge\n {...(rest as React.ComponentPropsWithoutRef<\"span\">)}\n >\n {iconName ? (\n <Icon\n mr={200}\n name={iconName}\n size={size === \"small\" ? \"mini\" : \"small\"}\n aria-hidden\n />\n ) : null}\n {children}\n </span>\n );\n};\n\nBadgeTailwind.displayName = \"BadgeTailwind\";\n","const defaultPurple = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.purple\",\n};\n\nconst suggestion = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.blue\",\n};\n\nconst passive = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.neutral\",\n};\n\nconst primary = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.blue\",\n};\n\nconst secondary = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.yellow\",\n};\n\nconst common = {\n color: \"colors.text.inverse\",\n background: \"colors.aqua.600\",\n};\n\nconst approval = {\n color: \"colors.text.body\",\n background: \"colors.container.background.decorative.orange\",\n};\n\n//Deprecated former \"types\"\n\n/**\n * @deprecated Use badgeColor instead\n */\n\nexport const legacyBadgeColors = {\n primary,\n secondary,\n passive,\n common,\n approval,\n default: defaultPurple,\n suggestion,\n};\n\nexport const badgeColors = {\n green: \"green\",\n blue: \"blue\",\n purple: \"purple\",\n yellow: \"yellow\",\n orange: \"orange\",\n red: \"red\",\n neutral: \"neutral\",\n magenta: \"magenta\",\n pink: \"pink\",\n aqua: \"aqua\",\n teal: \"teal\",\n} as const;\n"],"mappings":"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","names":["React","React","import_seeds_react_icon","styled","import_seeds_react_system_props","import_jsx_runtime","import_jsx_runtime"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-badge",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.38",
|
|
4
4
|
"description": "Seeds React Badge",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,15 +15,16 @@
|
|
|
15
15
|
},
|
|
16
16
|
"./codemods/*": {
|
|
17
17
|
"require": "./dist/codemods/*.js"
|
|
18
|
-
}
|
|
18
|
+
},
|
|
19
|
+
"./dist/badge.css": "./dist/badge.css"
|
|
19
20
|
},
|
|
20
21
|
"files": [
|
|
21
22
|
"dist",
|
|
22
23
|
"codemods"
|
|
23
24
|
],
|
|
24
25
|
"scripts": {
|
|
25
|
-
"build": "tsup --dts",
|
|
26
|
-
"build:debug": "tsup --dts --metafile",
|
|
26
|
+
"build": "tsup --dts && cp src/badge.css dist/badge.css",
|
|
27
|
+
"build:debug": "tsup --dts --metafile && cp src/badge.css dist/badge.css",
|
|
27
28
|
"dev": "tsup --watch --dts",
|
|
28
29
|
"clean": "rm -rf .turbo dist",
|
|
29
30
|
"clean:modules": "rm -rf node_modules",
|
|
@@ -32,8 +33,8 @@
|
|
|
32
33
|
"test:watch": "jest --watch --coverage=false"
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
36
|
-
"@sproutsocial/seeds-react-icon": "^2.4.
|
|
36
|
+
"@sproutsocial/seeds-react-box": "^1.1.25",
|
|
37
|
+
"@sproutsocial/seeds-react-icon": "^2.4.4",
|
|
37
38
|
"@sproutsocial/seeds-react-system-props": "^3.1.2",
|
|
38
39
|
"@styled-system/theme-get": "^5.1.2"
|
|
39
40
|
},
|