aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
73 lines (71 loc) • 1.78 kB
JavaScript
const zSpaceLayer = (config = {}) => {
const {
zIndex = 1,
elevation = 0,
backdrop = false,
blur = 0,
opacity = 1
} = config;
// Convert string elevations to numbers
const elevationMap = {
'level1': 1,
'level2': 2,
'level3': 3,
'level4': 4
};
const numericElevation = typeof elevation === 'string' ? elevationMap[elevation] || 0 : elevation;
const baseElevation = numericElevation * 100;
return {
position: 'relative',
zIndex,
transform: `translateZ(${baseElevation}px)`,
opacity,
...(backdrop && {
// Use createGlassStyle() instead,
// Use createGlassStyle() instead, // Safari support
})
};
};
const createZSpaceLayers = layers => {
return layers.map((layer, index) => ({
...zSpaceLayer({
...layer,
zIndex: layer.zIndex ?? index + 1
})
}));
};
// Utility for managing z-space hierarchies
class ZSpaceManager {
constructor() {
this.layers = new Map();
}
static getInstance() {
if (!ZSpaceManager.instance) {
ZSpaceManager.instance = new ZSpaceManager();
}
return ZSpaceManager.instance;
}
registerLayer(id, baseZIndex = 1) {
const existing = this.layers.get(id);
if (existing !== undefined) {
return existing;
}
// Find the highest z-index and add 1
const highestZ = Math.max(...Array.from(this.layers.values()), baseZIndex - 1);
const newZ = highestZ + 1;
this.layers.set(id, newZ);
return newZ;
}
unregisterLayer(id) {
this.layers.delete(id);
}
getLayerZIndex(id) {
return this.layers.get(id) ?? 1;
}
clear() {
this.layers.clear();
}
}
ZSpaceManager.getInstance();
export { ZSpaceManager, createZSpaceLayers, zSpaceLayer };
//# sourceMappingURL=zSpaceLayer.js.map