design-zystem 1.0.262 → 1.0.263
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/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -5
- package/dist/index.mjs +6 -5
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -318,6 +318,8 @@ declare const Link: ({ children, url, newTab, download, size, variant, ...rest }
|
|
|
318
318
|
interface AvatarBadge {
|
|
319
319
|
name: string;
|
|
320
320
|
family?: 'solid' | 'regular' | 'light' | 'brands';
|
|
321
|
+
backgroundColor?: string;
|
|
322
|
+
iconColor?: string;
|
|
321
323
|
}
|
|
322
324
|
interface AvatarProps {
|
|
323
325
|
name: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -318,6 +318,8 @@ declare const Link: ({ children, url, newTab, download, size, variant, ...rest }
|
|
|
318
318
|
interface AvatarBadge {
|
|
319
319
|
name: string;
|
|
320
320
|
family?: 'solid' | 'regular' | 'light' | 'brands';
|
|
321
|
+
backgroundColor?: string;
|
|
322
|
+
iconColor?: string;
|
|
321
323
|
}
|
|
322
324
|
interface AvatarProps {
|
|
323
325
|
name: string;
|
package/dist/index.js
CHANGED
|
@@ -2108,13 +2108,13 @@ var BadgeSlot = import_styled_components18.default.div`
|
|
|
2108
2108
|
display: flex;
|
|
2109
2109
|
align-items: center;
|
|
2110
2110
|
justify-content: center;
|
|
2111
|
-
background-color: ${colors
|
|
2111
|
+
background-color: ${(props) => colors[props.$bg] || props.$bg};
|
|
2112
2112
|
border-radius: 50%;
|
|
2113
2113
|
box-shadow: 0 2px 6px ${colors.blue_950}66;
|
|
2114
2114
|
line-height: 0;
|
|
2115
2115
|
`;
|
|
2116
2116
|
var BadgeIcon = import_styled_components18.default.i`
|
|
2117
|
-
color: ${colors
|
|
2117
|
+
color: ${(props) => colors[props.$color] || props.$color};
|
|
2118
2118
|
font-size: ${(props) => Math.round(props.$size * 0.2)}px;
|
|
2119
2119
|
line-height: 2;
|
|
2120
2120
|
`;
|
|
@@ -2139,7 +2139,7 @@ var Avatar = ({
|
|
|
2139
2139
|
shape = "circle",
|
|
2140
2140
|
badge
|
|
2141
2141
|
}) => {
|
|
2142
|
-
var _a;
|
|
2142
|
+
var _a, _b, _c;
|
|
2143
2143
|
const [hasImageError, setHasImageError] = (0, import_react9.useState)(false);
|
|
2144
2144
|
const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
|
|
2145
2145
|
const resolvedText = resolveColor(textColor, colors.dark);
|
|
@@ -2166,11 +2166,12 @@ var Avatar = ({
|
|
|
2166
2166
|
) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Initials, { $textColor: resolvedText, $size: size, children: initials })
|
|
2167
2167
|
}
|
|
2168
2168
|
),
|
|
2169
|
-
badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeSlot, { $size: size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2169
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BadgeSlot, { $size: size, $bg: (_a = badge.backgroundColor) != null ? _a : colors.white, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
2170
2170
|
BadgeIcon,
|
|
2171
2171
|
{
|
|
2172
2172
|
$size: size,
|
|
2173
|
-
|
|
2173
|
+
$color: (_b = badge.iconColor) != null ? _b : colors.blue_950,
|
|
2174
|
+
className: `fa-${(_c = badge.family) != null ? _c : "regular"} fa-${badge.name}`
|
|
2174
2175
|
}
|
|
2175
2176
|
) })
|
|
2176
2177
|
] });
|
package/dist/index.mjs
CHANGED
|
@@ -1973,13 +1973,13 @@ var BadgeSlot = styled18.div`
|
|
|
1973
1973
|
display: flex;
|
|
1974
1974
|
align-items: center;
|
|
1975
1975
|
justify-content: center;
|
|
1976
|
-
background-color: ${colors
|
|
1976
|
+
background-color: ${(props) => colors[props.$bg] || props.$bg};
|
|
1977
1977
|
border-radius: 50%;
|
|
1978
1978
|
box-shadow: 0 2px 6px ${colors.blue_950}66;
|
|
1979
1979
|
line-height: 0;
|
|
1980
1980
|
`;
|
|
1981
1981
|
var BadgeIcon = styled18.i`
|
|
1982
|
-
color: ${colors
|
|
1982
|
+
color: ${(props) => colors[props.$color] || props.$color};
|
|
1983
1983
|
font-size: ${(props) => Math.round(props.$size * 0.2)}px;
|
|
1984
1984
|
line-height: 2;
|
|
1985
1985
|
`;
|
|
@@ -2004,7 +2004,7 @@ var Avatar = ({
|
|
|
2004
2004
|
shape = "circle",
|
|
2005
2005
|
badge
|
|
2006
2006
|
}) => {
|
|
2007
|
-
var _a;
|
|
2007
|
+
var _a, _b, _c;
|
|
2008
2008
|
const [hasImageError, setHasImageError] = useState5(false);
|
|
2009
2009
|
const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
|
|
2010
2010
|
const resolvedText = resolveColor(textColor, colors.dark);
|
|
@@ -2031,11 +2031,12 @@ var Avatar = ({
|
|
|
2031
2031
|
) : /* @__PURE__ */ jsx22(Initials, { $textColor: resolvedText, $size: size, children: initials })
|
|
2032
2032
|
}
|
|
2033
2033
|
),
|
|
2034
|
-
badge && /* @__PURE__ */ jsx22(BadgeSlot, { $size: size, children: /* @__PURE__ */ jsx22(
|
|
2034
|
+
badge && /* @__PURE__ */ jsx22(BadgeSlot, { $size: size, $bg: (_a = badge.backgroundColor) != null ? _a : colors.white, children: /* @__PURE__ */ jsx22(
|
|
2035
2035
|
BadgeIcon,
|
|
2036
2036
|
{
|
|
2037
2037
|
$size: size,
|
|
2038
|
-
|
|
2038
|
+
$color: (_b = badge.iconColor) != null ? _b : colors.blue_950,
|
|
2039
|
+
className: `fa-${(_c = badge.family) != null ? _c : "regular"} fa-${badge.name}`
|
|
2039
2040
|
}
|
|
2040
2041
|
) })
|
|
2041
2042
|
] });
|