201 lines
5.2 KiB
JavaScript
201 lines
5.2 KiB
JavaScript
"use strict";
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// src/components/avatar.ts
|
|
var avatar_exports = {};
|
|
__export(avatar_exports, {
|
|
avatarTheme: () => avatarTheme
|
|
});
|
|
module.exports = __toCommonJS(avatar_exports);
|
|
var import_anatomy = require("@chakra-ui/anatomy");
|
|
var import_styled_system = require("@chakra-ui/styled-system");
|
|
var import_theme_tools = require("@chakra-ui/theme-tools");
|
|
|
|
// src/foundations/spacing.ts
|
|
var spacing = {
|
|
px: "1px",
|
|
0.5: "0.125rem",
|
|
1: "0.25rem",
|
|
1.5: "0.375rem",
|
|
2: "0.5rem",
|
|
2.5: "0.625rem",
|
|
3: "0.75rem",
|
|
3.5: "0.875rem",
|
|
4: "1rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
8: "2rem",
|
|
9: "2.25rem",
|
|
10: "2.5rem",
|
|
12: "3rem",
|
|
14: "3.5rem",
|
|
16: "4rem",
|
|
20: "5rem",
|
|
24: "6rem",
|
|
28: "7rem",
|
|
32: "8rem",
|
|
36: "9rem",
|
|
40: "10rem",
|
|
44: "11rem",
|
|
48: "12rem",
|
|
52: "13rem",
|
|
56: "14rem",
|
|
60: "15rem",
|
|
64: "16rem",
|
|
72: "18rem",
|
|
80: "20rem",
|
|
96: "24rem"
|
|
};
|
|
|
|
// src/foundations/sizes.ts
|
|
var largeSizes = {
|
|
max: "max-content",
|
|
min: "min-content",
|
|
full: "100%",
|
|
"3xs": "14rem",
|
|
"2xs": "16rem",
|
|
xs: "20rem",
|
|
sm: "24rem",
|
|
md: "28rem",
|
|
lg: "32rem",
|
|
xl: "36rem",
|
|
"2xl": "42rem",
|
|
"3xl": "48rem",
|
|
"4xl": "56rem",
|
|
"5xl": "64rem",
|
|
"6xl": "72rem",
|
|
"7xl": "80rem",
|
|
"8xl": "90rem",
|
|
prose: "60ch"
|
|
};
|
|
var container = {
|
|
sm: "640px",
|
|
md: "768px",
|
|
lg: "1024px",
|
|
xl: "1280px"
|
|
};
|
|
var sizes = {
|
|
...spacing,
|
|
...largeSizes,
|
|
container
|
|
};
|
|
var sizes_default = sizes;
|
|
|
|
// src/utils/run-if-fn.ts
|
|
var isFunction = (value) => typeof value === "function";
|
|
function runIfFn(valueOrFn, ...args) {
|
|
return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
|
|
}
|
|
|
|
// src/components/avatar.ts
|
|
var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(import_anatomy.avatarAnatomy.keys);
|
|
var $border = (0, import_styled_system.cssVar)("avatar-border-color");
|
|
var $bg = (0, import_styled_system.cssVar)("avatar-bg");
|
|
var $fs = (0, import_styled_system.cssVar)("avatar-font-size");
|
|
var $size = (0, import_styled_system.cssVar)("avatar-size");
|
|
var baseStyleBadge = (0, import_styled_system.defineStyle)({
|
|
borderRadius: "full",
|
|
border: "0.2em solid",
|
|
borderColor: $border.reference,
|
|
[$border.variable]: "white",
|
|
_dark: {
|
|
[$border.variable]: "colors.gray.800"
|
|
}
|
|
});
|
|
var baseStyleExcessLabel = (0, import_styled_system.defineStyle)({
|
|
bg: $bg.reference,
|
|
fontSize: $fs.reference,
|
|
width: $size.reference,
|
|
height: $size.reference,
|
|
lineHeight: "1",
|
|
[$bg.variable]: "colors.gray.200",
|
|
_dark: {
|
|
[$bg.variable]: "colors.whiteAlpha.400"
|
|
}
|
|
});
|
|
var baseStyleContainer = (0, import_styled_system.defineStyle)((props) => {
|
|
const { name, theme } = props;
|
|
const bg = name ? (0, import_theme_tools.randomColor)({ string: name }) : "colors.gray.400";
|
|
const isBgDark = (0, import_theme_tools.isDark)(bg)(theme);
|
|
let color = "white";
|
|
if (!isBgDark)
|
|
color = "gray.800";
|
|
return {
|
|
bg: $bg.reference,
|
|
fontSize: $fs.reference,
|
|
color,
|
|
borderColor: $border.reference,
|
|
verticalAlign: "top",
|
|
width: $size.reference,
|
|
height: $size.reference,
|
|
"&:not([data-loaded])": {
|
|
[$bg.variable]: bg
|
|
},
|
|
[$border.variable]: "colors.white",
|
|
_dark: {
|
|
[$border.variable]: "colors.gray.800"
|
|
}
|
|
};
|
|
});
|
|
var baseStyleLabel = (0, import_styled_system.defineStyle)({
|
|
fontSize: $fs.reference,
|
|
lineHeight: "1"
|
|
});
|
|
var baseStyle = definePartsStyle((props) => ({
|
|
badge: runIfFn(baseStyleBadge, props),
|
|
excessLabel: runIfFn(baseStyleExcessLabel, props),
|
|
container: runIfFn(baseStyleContainer, props),
|
|
label: baseStyleLabel
|
|
}));
|
|
function getSize(size) {
|
|
const themeSize = size !== "100%" ? sizes_default[size] : void 0;
|
|
return definePartsStyle({
|
|
container: {
|
|
[$size.variable]: themeSize != null ? themeSize : size,
|
|
[$fs.variable]: `calc(${themeSize != null ? themeSize : size} / 2.5)`
|
|
},
|
|
excessLabel: {
|
|
[$size.variable]: themeSize != null ? themeSize : size,
|
|
[$fs.variable]: `calc(${themeSize != null ? themeSize : size} / 2.5)`
|
|
}
|
|
});
|
|
}
|
|
var sizes2 = {
|
|
"2xs": getSize(4),
|
|
xs: getSize(6),
|
|
sm: getSize(8),
|
|
md: getSize(12),
|
|
lg: getSize(16),
|
|
xl: getSize(24),
|
|
"2xl": getSize(32),
|
|
full: getSize("100%")
|
|
};
|
|
var avatarTheme = defineMultiStyleConfig({
|
|
baseStyle,
|
|
sizes: sizes2,
|
|
defaultProps: {
|
|
size: "md"
|
|
}
|
|
});
|
|
// Annotate the CommonJS export names for ESM import in node:
|
|
0 && (module.exports = {
|
|
avatarTheme
|
|
});
|
|
//# sourceMappingURL=avatar.js.map
|