Files
wdi-dashboard/node_modules/@chakra-ui/theme/dist/components/avatar.js
2024-08-16 15:06:52 +05:30

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